<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>订阅纸刊</title>
		<link rel="stylesheet" href="/mobile/css/weui.min.css">
		<link rel="stylesheet" href="/mobile/css/jquery-weui.min.css">
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />

		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>
		<script src="/mobile/js/jquery-weui.min.js"></script>
	</head>
	<body>

		<div class="main" style="border-top: 1px solid #e5e5e5;">
			<div class="order_hd" style="padding-top: 15px;">
				<img src="{$rs.image}" />
				<div class="content">
					<div class="title">{$rs.name}</div>
					<div style="display:flex; justify-content: space-between;">
						<span style="color:red">￥<span id="danjia">{$rs.jidu_price}</span>/每份</span>

					</div>

				</div>

			</div>
			<div class="layui-form">
			  <input type="radio" name="AAA" value="0" title="订一季" lay-filter="price" checked>
			  <input type="radio" name="AAA" value="1" title="订半年" lay-filter="price">
			  <input type="radio" name="AAA" value="2" title="订整年" lay-filter="price">
			</div>
			<div class="order_bd">
				<div class="weui-cells weui-cells_form">

				  <div class="weui-cell">
				    <div class="weui-cell__hd"><label for="" class="weui-label"><span style="color:red;">*</span> 订购日期</label></div>
				    <div class="weui-cell__bd">
				      <input class="weui-input" type="date" id="dinggou_date" min="{:date('Y-m-d')}" value="">
				    </div>
				  </div>
				  <div class="weui-cell">
				    <div class="weui-cell__hd"><label for="" class="weui-label"><span style="color:red;">*</span> 订购份数</label></div>
				    <div class="weui-cell__bd" style="text-align: right;">
				      <div>
						  <button onclick="jian()" class="iconfont" style="display: inline-block;width: 24px;height: 24px; vertical-align: middle;border: 1px solid #e5e5e5;">&#xe768;</button>
						  <input type="number" id="shuliang" style="display: inline-block; width: 20px; vertical-align: middle; text-align: center;" max="99" min="1" value="1" />
						  <button onclick="jia()" class="iconfont" style="display: inline-block;width: 24px;height: 24px; vertical-align: middle;border: 1px solid #e5e5e5;">&#xe767;</button>
					  </div>
				    </div>
				  </div>
				  <div class="weui-cell">
				      <div class="weui-cell__hd"><label class="weui-label"><span style="color:red;">*</span> 收货人</label></div>
				      <div class="weui-cell__bd">
				        <input class="weui-input" type="text" id="shouhuoren" maxlength="10" placeholder="请输入收货人姓名">
				      </div>
				  </div>
				  <div class="weui-cell">
				      <div class="weui-cell__hd"><label class="weui-label"><span style="color:red;">*</span> 收货人电话</label></div>
				      <div class="weui-cell__bd">
				        <input class="weui-input" type="text" maxlength="20" id="tel" placeholder="请输入收货人电话">
				      </div>
				  </div>
				  <div class="weui-cell">
				      <div class="weui-cell__hd"><label class="weui-label"><span style="color:red;">*</span> 收货人地址</label></div>
				      <div class="weui-cell__bd">
				        <textarea class="weui-textarea" placeholder="请输入收货人地址" id="address" rows="3"></textarea>
				      </div>
				  </div>
				  <div class="weui-cell">
				      <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
				      <div class="weui-cell__bd">
				        <textarea class="weui-textarea" id="beizhu" placeholder="默认从订购日期次月开始寄送当期书刊，如有其它问题请备注" rows="3"></textarea>
				      </div>
				  </div>
				</div>
			</div>
		</div>
		<div style="height:59px;"></div>
		<div class="order_pay_bottom">
			<div class="left layui-font-red" >
				总价 ￥<span id="heji">{$rs.jidu_price}</span>
			</div>
			<button type="button" class="layui-btn layui-bg-red layui-btn-radius" id="btn_submit">付款</button>
		</div>
	</body>
	<script>
		var price_list=[{$rs.jidu_price},{$rs.bannian_price},{$rs.yinian_price}];
	layui.use(function(){
	  var form = layui.form;
	  var layer = layui.layer;
	  // radio 事件
	  form.on('radio(price)', function(data){
	    var elem = data.elem; // 获得 radio 原始 DOM 对象
	    var checked = elem.checked; // 获得 radio 选中状态
	    var value = elem.value; // 获得 radio 值
	    var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象

	    //layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
		price=price_list[value];
		$('#danjia').text(price);
		num=parseInt($('#shuliang').val());
		$('#heji').text((price*num).toFixed(2));
	  });

	  $('#btn_submit').bind('click',function(){
		  shichang_arr=['一季度','半年','一年'];
		  aa=$('input[name="AAA"]:checked').val();
		  if($('#dinggou_date').val()==''){
			  layer.msg('请选择订购日期',{icon:5});return false;
		  }
		  if(parseInt($('#shuliang').val())<1){
		  	  layer.msg('订购数量需大于等于1',{icon:5});return false;
		  }
		  if($('#shouhuoren').val().trim()==''){
			  layer.msg('请填写收货人',{icon:5});return false;
		  }
		  if($('#tel').val().trim()==''){
		  	layer.msg('请填写手机号',{icon:5});return false;
		  }
		  if (!/^1\d{10}$/.test($('#tel').val().trim())) {
                layer.msg('手机号格式不正确',{icon:5});return false;
          }
		  if($('#address').val().trim()==''){
		  	layer.msg('请填写电话号码',{icon:5});return false;
		  }
		  var loadIndex = layer.load(2);
		  $.ajax({
		      type:"POST",
		      url:"/api.php/index/submit_dingyue",
		      dataType:"json",
		      data:{
		          "dingyueshichang":shichang_arr[aa],
		          "dinggou_date":$('#dinggou_date').val(),
		          "price":$('#danjia').text(),
		          "dinggoufenshu":parseInt($('#shuliang').val()),
		          "money":$('#heji').text(),
		          "shouhuoren":$('#shouhuoren').val().trim(),
				  "tel":$('#tel').val().trim(),
				  "address":$('#address').val().trim(),
		          "beizhu":$('#beizhu').val().trim(),
		          "qikan_id":{$rs.id}
		      },
		      success:function(res){
		          console.log(res);
				  layer.close(loadIndex);
		          if(res.code==0){
		              layer.msg(res.msg,{icon:5});

		          }else{
		              layer.msg(res.msg,{icon:6},function(){
		                  layer.close(loadIndex);
						  window.location.href="{:url('shukan/qikan_dingyue_fukuan')}?id="+res.data.order_id;
		              });
		          }
		      }
		  });
	  })

	});

	function jia(){
		num=parseInt($('#shuliang').val());
		num++;
		if(num<100){
			$('#shuliang').val(num);

			price=$('#danjia').text();

			$('#heji').text((price*num).toFixed(2));
		}

	}
	function jian(){
		num=parseInt($('#shuliang').val());
		num--;
		if(num>0){
			$('#shuliang').val(num);

			price=$('#danjia').text();

			$('#heji').text((price*num).toFixed(2));
		}

	}

	function submit_dingyue(){
		//shichang_arr=['一季度','半年','一年'];
		//console.log(shichang_arr[$(['AAA'])]);
		$('input[name="AAA"]:checked').val();
		return false;

	}
	</script>
</html>
